<template>
  <div style="background: #E6E6E6;padding-top: 14px;">
    <sunDrawerBack show="show_information" :parent="this.$parent.$parent" />
    <el-page-header class="sun-el-page-header" :content="'课程资料【' + teacherName + '】'" @back="showHide('show_information')" />
    <div class="box">
      <el-form ref="refForm" class="fromBox" label-width="150px">
        <div style="cut-off" />
        <span v-for="item in infoList" :key="item.key">
          <span v-if="item.category === 'field'">
            <div class="category_box">
              <div class="name_box">{{ item.name }}</div>
              <span v-if="item.type === 'text' || !item.type">
                <div style="padding: 10px">
                  <el-form-item
                    :label="item.name + ' :'"
                    :prop="item.key"
                  >
                    <el-input
                      v-model="item.content"
                      readonly
                      :type="item.type ? item.type.toLowerCase() : 'text'"
                      :placeholder="'请输入'+item.name"
                    />
                  </el-form-item>
                  <div class="flex_end">
                    <div class="opinion_box">
                      <div class="flex_center_align flex_between" style="width:100%;">
                        <div style="width:80%;">
                          <div v-if="formConfig.detail_audit" class="flex_center_align flex_between" style="width:100%;">
                            <div style="height:60px;width:30%;" class="flex_center_align">
                              <div style="width:60px;">{{ '审核：' }}</div>
                              <el-radio-group v-model="item.audit_result.qualified_status" class="flex_center_align">
                                <el-radio :disabled="readOnlyInfo" :label="1">合格</el-radio>
                                <el-radio :disabled="readOnlyInfo" :label="2">不合格</el-radio>
                              </el-radio-group>
                            </div>
                            <div v-if="item.audit_result.qualified_status === 2" style="width: 69%;line-height: 60px;">
                              <el-input v-model="item.audit_result.audit_comment" :readonly="readOnlyInfo" style="margin-left: 0px;" class="opinion_input" placeholder="请输入修改意见" />
                            </div>
                          </div>
                        </div>
                        <div v-if="formConfig !== '{}'" style="width:19%;">
                          <div v-for="bnt in formConfig.category" :key="bnt.api" class="flex_center_align flex_end">
                            <el-button type="danger" size="mini" style="margin-left: 10px" :disabled="readOnlyInfo" @click="itemOperationsBnt(bnt, item, false)">
                              {{ bnt.name }}
                            </el-button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <span v-if="item.type === 'textArea'">
                <div style="padding: 10px">
                  <el-form-item
                    :label="item.name + ' :'"
                    :prop="item.key"
                  >
                    <el-input
                      v-model="item.content"
                      show-word-limit
                      readonly
                      :autosize="{minRows: 3}"
                      :type="item.type.toLowerCase()"
                      :minlength="item.min_word_number"
                      :maxlength="item.max_word_number || 9999"
                      :placeholder="'请输入'+item.name"
                    />
                  </el-form-item>
                  <div class="flex_end">
                    <div class="opinion_box">
                      <div class="flex_center_align flex_between" style="width:100%;">
                        <div style="width:80%;">
                          <div v-if="formConfig.detail_audit" class="flex_center_align flex_between" style="width:100%;">
                            <div style="height:60px;width:30%;" class="flex_center_align">
                              <div style="width:60px;">{{ '审核：' }}</div>
                              <el-radio-group v-model="item.audit_result.qualified_status" class="flex_center_align">
                                <el-radio :disabled="readOnlyInfo" :label="1">合格</el-radio>
                                <el-radio :disabled="readOnlyInfo" :label="2">不合格</el-radio>
                              </el-radio-group>
                            </div>
                            <div v-if="item.audit_result.qualified_status === 2" style="width: 69%;line-height: 60px;">
                              <el-input v-model="item.audit_result.audit_comment" :readonly="readOnlyInfo" style="margin-left: 0px;" class="opinion_input" placeholder="请输入修改意见" />
                            </div>
                          </div>
                        </div>
                        <div v-if="formConfig !== '{}'" style="width:19%;">
                          <div v-for="bnt in formConfig.category" :key="bnt.api" class="flex_center_align flex_end">
                            <el-button type="danger" size="mini" style="margin-left: 10px" :disabled="readOnlyInfo" @click="itemOperationsBnt(bnt, item, false)">
                              {{ bnt.name }}
                            </el-button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <span v-if="item.type === 'richText'">
                <div style="padding: 10px;">
                  <el-form-item
                    style="margin-bottom: 0"
                    :label="item.name + ' :'"
                    :prop="item.key"
                  />
                  <div style="margin-bottom: 20px;margin-left: 150px">
                    <template>
                      <span v-html="item.content" />
                    </template>
                  </div>
                  <div class="flex_end">
                    <div class="opinion_box">
                      <div class="flex_center_align flex_between" style="width:100%;">
                        <div style="width:80%;">
                          <div v-if="formConfig.detail_audit" class="flex_center_align flex_between" style="width:100%;">
                            <div style="height:60px;width:30%;" class="flex_center_align">
                              <div style="width:60px;">{{ '审核：' }}</div>
                              <el-radio-group v-model="item.audit_result.qualified_status" class="flex_center_align">
                                <el-radio :disabled="readOnlyInfo" :label="1">合格</el-radio>
                                <el-radio :disabled="readOnlyInfo" :label="2">不合格</el-radio>
                              </el-radio-group>
                            </div>
                            <div v-if="item.audit_result.qualified_status === 2" style="width: 69%;line-height: 60px;">
                              <el-input v-model="item.audit_result.audit_comment" :readonly="readOnlyInfo" style="margin-left: 0px;" class="opinion_input" placeholder="请输入修改意见" />
                            </div>
                          </div>
                        </div>
                        <div v-if="formConfig !== '{}'" style="width:19%;">
                          <div v-for="bnt in formConfig.category" :key="bnt.api" class="flex_center_align flex_end">
                            <el-button type="danger" size="mini" style="margin-left: 10px" :disabled="readOnlyInfo" @click="itemOperationsBnt(bnt, item, false)">
                              {{ bnt.name }}
                            </el-button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <span v-if="item.type === 'file' || item.type === 'files'">
                <div class="upload_item_box">
                  <el-form-item
                    :label="item.name + ' :'"
                    :prop="item.key"
                  >
                    <el-upload
                      disabled
                      class="sun-el-upload"
                      :file-list="item.content"
                      action=""
                      :on-preview="onPreview"
                      list-type="text"
                    />
                  </el-form-item>
                  <div class="downloadBox">
                    <div v-for="download in item.content" :key="download.path" @click="$XhrDownload(download.path, download.name, '')">
                      <i class="el-icon-download" style="color: #409EFF" />
                    </div>
                  </div>
                  <div class="flex_end">
                    <div class="opinion_box">
                      <div class="flex_center_align flex_between" style="width:100%;">
                        <div style="width:80%;">
                          <div v-if="formConfig.detail_audit" class="flex_center_align flex_between" style="width:100%;">
                            <div style="height:60px;width:30%;" class="flex_center_align">
                              <div style="width:60px;">{{ '审核：' }}</div>
                              <el-radio-group v-model="item.audit_result.qualified_status" class="flex_center_align">
                                <el-radio :disabled="readOnlyInfo" :label="1">合格</el-radio>
                                <el-radio :disabled="readOnlyInfo" :label="2">不合格</el-radio>
                              </el-radio-group>
                            </div>
                            <div v-if="item.audit_result.qualified_status === 2" style="width: 69%;line-height: 60px;">
                              <el-input v-model="item.audit_result.audit_comment" :readonly="readOnlyInfo" style="margin-left: 0px;" class="opinion_input" placeholder="请输入修改意见" />
                            </div>
                          </div>
                        </div>
                        <div v-if="formConfig !== '{}'" style="width:19%;">
                          <div v-for="bnt in formConfig.category" :key="bnt.api" class="flex_center_align flex_end">
                            <el-button type="danger" size="mini" style="margin-left: 10px" :disabled="readOnlyInfo" @click="itemOperationsBnt(bnt, item, false)">
                              {{ bnt.name }}
                            </el-button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
            </div>
          </span>
          <span v-if="item.category === 'group'">
            <div class="category_box">
              <div class="name_box">{{ item.name }}</div>
              <span v-for="el in item.children" :key="el.key">
                <div>
                  <span v-if="el.type === 'text' || !el.type">
                    <div style="padding: 10px">
                      <el-form-item
                        :label="el.name + ' :'"
                        :prop="el.key"
                      >
                        <el-input
                          v-model="el.content"
                          readonly
                          :type="el.type ? el.type.toLowerCase() : 'text'"
                          :placeholder="'请输入'+el.name"
                        />
                      </el-form-item>
                      <div class="flex_end">
                        <div class="opinion_box">
                          <div class="flex_center_align flex_between" style="width:100%;">
                            <div style="width:80%;">
                              <div v-if="formConfig.detail_audit" class="flex_center_align flex_between" style="width:100%;">
                                <div style="height:60px;width:30%;" class="flex_center_align">
                                  <div style="width:60px;">{{ '审核：' }}</div>
                                  <el-radio-group v-model="el.audit_result.qualified_status" class="flex_center_align">
                                    <el-radio :disabled="readOnlyInfo" :label="1">合格</el-radio>
                                    <el-radio :disabled="readOnlyInfo" :label="2">不合格</el-radio>
                                  </el-radio-group>
                                </div>
                                <div v-if="el.audit_result.qualified_status === 2" style="width: 69%;line-height: 60px;">
                                  <el-input v-model="el.audit_result.audit_comment" :readonly="readOnlyInfo" style="margin-left: 0px;" class="opinion_input" placeholder="请输入修改意见" />
                                </div>
                              </div>
                            </div>
                            <div v-if="formConfig !== '{}'" style="width:19%;">
                              <div v-for="bnt in formConfig.category" :key="bnt.api" class="flex_center_align flex_end">
                                <el-button type="danger" size="mini" style="margin-left: 10px" :disabled="readOnlyInfo" @click="itemOperationsBnt(bnt, el, item.key)">
                                  {{ bnt.name }}
                                </el-button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </span>
                  <span v-if="el.type === 'textArea'">
                    <div style="padding: 10px">
                      <el-form-item
                        :label="el.name + ' :'"
                        :prop="el.key"
                      >
                        <el-input
                          v-model="el.content"
                          readonly
                          show-word-limit
                          :autosize="{minRows: 3}"
                          :type="el.type.toLowerCase()"
                          :minlength="el.min_word_number"
                          :maxlength="el.max_word_number || 9999"
                          :placeholder="'请输入'+el.name"
                        />
                      </el-form-item>
                      <div class="flex_end">
                        <div class="opinion_box">
                          <div class="flex_center_align flex_between" style="width:100%;">
                            <div style="width:80%;">
                              <div v-if="formConfig.detail_audit" class="flex_center_align flex_between" style="width:100%;">
                                <div style="height:60px;width:30%;" class="flex_center_align">
                                  <div style="width:60px;">{{ '审核：' }}</div>
                                  <el-radio-group v-model="el.audit_result.qualified_status" class="flex_center_align">
                                    <el-radio :disabled="readOnlyInfo" :label="1">合格</el-radio>
                                    <el-radio :disabled="readOnlyInfo" :label="2">不合格</el-radio>
                                  </el-radio-group>
                                </div>
                                <div v-if="el.audit_result.qualified_status === 2" style="width: 69%;line-height: 60px;">
                                  <el-input v-model="el.audit_result.audit_comment" :readonly="readOnlyInfo" style="margin-left: 0px;" class="opinion_input" placeholder="请输入修改意见" />
                                </div>
                              </div>
                            </div>
                            <div v-if="formConfig !== '{}'" style="width:19%;">
                              <div v-for="bnt in formConfig.category" :key="bnt.api" class="flex_center_align flex_end">
                                <el-button type="danger" size="mini" style="margin-left: 10px" :disabled="readOnlyInfo" @click="itemOperationsBnt(bnt, el, item.key)">
                                  {{ bnt.name }}
                                </el-button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </span>
                  <span v-if="el.type === 'richText'">
                    <div style="padding: 10px">
                      <el-form-item
                        style="margin-bottom: 0"
                        :label="el.name + ' :'"
                        :prop="el.key"
                      />
                      <div style="margin-bottom: 20px;margin-left: 150px">
                        <template>
                          <span v-html="el.content" />
                        </template>
                      </div>
                      <div class="flex_end">
                        <div class="opinion_box">
                          <div class="flex_center_align flex_between" style="width:100%;">
                            <div style="width:80%;">
                              <div v-if="formConfig.detail_audit" class="flex_center_align flex_between" style="width:100%;">
                                <div style="height:60px;width:30%;" class="flex_center_align">
                                  <div style="width:60px;">{{ '审核：' }}</div>
                                  <el-radio-group v-model="el.audit_result.qualified_status" class="flex_center_align">
                                    <el-radio :disabled="readOnlyInfo" :label="1">合格</el-radio>
                                    <el-radio :disabled="readOnlyInfo" :label="2">不合格</el-radio>
                                  </el-radio-group>
                                </div>
                                <div v-if="el.audit_result.qualified_status === 2" style="width: 69%;line-height: 60px;">
                                  <el-input v-model="el.audit_result.audit_comment" :readonly="readOnlyInfo" style="margin-left: 0px;" class="opinion_input" placeholder="请输入修改意见" />
                                </div>
                              </div>
                            </div>
                            <div v-if="formConfig !== '{}'" style="width:19%;">
                              <div v-for="bnt in formConfig.category" :key="bnt.api" class="flex_center_align flex_end">
                                <el-button type="danger" size="mini" style="margin-left: 10px" :disabled="readOnlyInfo" @click="itemOperationsBnt(bnt, el, item.key)">
                                  {{ bnt.name }}
                                </el-button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </span>
                  <span v-if="el.type === 'file' || el.type === 'files'">
                    <div class="upload_item_box">
                      <el-form-item
                        :label="el.name + ' :'"
                        :prop="el.key"
                      >
                        <el-upload
                          disabled
                          class="sun-el-upload"
                          :file-list="el.content"
                          action=""
                          :on-preview="onPreview"
                          list-type="text"
                        />
                      </el-form-item>
                      <div class="downloadBox">
                        <div v-for="download in el.content" :key="download.path" @click="$XhrDownload(download.path, download.name, '')">
                          <i class="el-icon-download" style="color: #409EFF" />
                        </div>
                      </div>
                      <div class="flex_end">
                        <div class="opinion_box">
                          <div class="flex_center_align flex_between" style="width:100%;">
                            <div style="width:80%;">
                              <div v-if="formConfig.detail_audit" class="flex_center_align flex_between" style="width:100%;">
                                <div style="height:60px;width:30%;" class="flex_center_align">
                                  <div style="width:60px;">{{ '审核：' }}</div>
                                  <el-radio-group v-model="el.audit_result.qualified_status" class="flex_center_align">
                                    <el-radio :disabled="readOnlyInfo" :label="1">合格</el-radio>
                                    <el-radio :disabled="readOnlyInfo" :label="2">不合格</el-radio>
                                  </el-radio-group>
                                </div>
                                <div v-if="el.audit_result.qualified_status === 2" style="width: 69%;line-height: 60px;">
                                  <el-input v-model="el.audit_result.audit_comment" :readonly="readOnlyInfo" style="margin-left: 0px;" class="opinion_input" placeholder="请输入修改意见" />
                                </div>
                              </div>
                            </div>
                            <div v-if="formConfig !== '{}'" style="width:19%;">
                              <div v-for="bnt in formConfig.category" :key="bnt.api" class="flex_center_align flex_end">
                                <el-button type="danger" size="mini" :disabled="readOnlyInfo" style="margin-left: 10px" @click="itemOperationsBnt(bnt, el, item.key)">
                                  {{ bnt.name }}
                                </el-button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </span>
                </div>
              </span>
            </div>
          </span>
        </span>
      </el-form>
    </div>
    <div v-if="qualified_status === 2" class="category_box" style="margin: 0 14px 14px 14px">
      <div class="name_box">{{ '审核总结' }}</div>
      <div style="padding: 10px;font-weight: bold;">{{ qualified_status === 2 ? '整体不合格' : '整体合格' }}</div>
      <div style="padding: 10px">
        <el-input
          v-model="audit_comment"
          show-word-limit
          autosize
          :readonly="readOnlyInfo"
          placeholder="请输入内容"
          type="textarea"
        />
      </div>
    </div>
    <div v-if="formConfig === '{}'" v-loading="loading" class="but-list">
      <el-button size="mini" @click="showHide('show_information')">取 消</el-button>
    </div>
    <div v-if="formConfig !== '{}'" v-loading="loading" class="but-list">
      <el-button size="mini" @click="showHide('show_information')">取 消</el-button>
      <el-button v-for="bnt in formConfig.item" :key="bnt.api" :disabled="readOnlyInfo" type="primary" size="mini" style="margin-left: 10px" @click="drawerOperationsBnt(bnt, 'show_information')">
        {{ bnt.name }}
      </el-button>
    </div>
    <div class="cut-off" />
  </div>
</template>

<script>
import SunDrawerBack from '@/sun-components/SunDrawerBack'
// import Tinymce from '@/sun-components/Tinymce'
// import { MessageBox } from 'element-ui'
import { $dialogs, $tooltips } from '@/sun-components/SunMsg.js'
import { $butRequest } from '@/sun-components/SunProcessButRequests.js'
export default {
  name: 'ProcessCommonAuditInformation',
  components: { SunDrawerBack /** Tinymce */ },
  props: {
    source: {
      type: String,
      default: ''
    },
    listItem: {
      type: Object,
      default() {
        return {
        }
      }
    }
  },
  data() {
    return {
      loading: false,
      infoList: [],
      formConfig: {},
      audit_comment: '', // 审核明细 json
      qualified_status: 1, // 整体合不合格   1：合格  2：不合格 【所有字段合格时为合格，其中有不合格字段时为不合格】
      audit_detail: [] // 所有字段的合格情况
    }
  },
  computed: {
    show_information() {
      return this.$parent.$parent.show_information
    },
    teacherName() {
      return this.$parent.$parent.currentItem?.teacher?.name
    },
    readOnlyInfo() { // 3驳回 4拒绝
      return this.$parent.$parent.currentItem?.group_item_audit_status === 0 ? false : !!((this.$parent.$parent.currentItem?.status === 3 || this.$parent.$parent.currentItem?.status === 4))
    }
  },
  watch: {
    show_information: {
      handler: function(show) {
        if (show) {
          this.requestData()
        }
      }
    },
    infoList: {
      handler: function(data) {
        this.structureData(data)
      },
      deep: true
    }
  },
  created() {
    if (this.show_information) {
      this.requestData()
    }
  },
  methods: {
    requestData() {
      const _that = this
      const objItem = _that.$parent.$parent.currentItem
      const btn = _that.$parent.$parent.set_advance_request
      this.$set(this, 'infoList', [])
      if (btn.model === 'audit_information') { // 确保接口的准确性
        this.loading = true
        $butRequest(btn, objItem)
          .then((response) => {
            this.loading = false
            // _that.infoList = response.information
            this.$set(this, 'infoList', response.information)
            _that.formConfig = response.config ? response.config.operations : {}
            _that.structureData(response.information) // 设置提交时需要的合格不合格数据
          }).catch(() => {
            this.loading = false
          })
      } else {
        $tooltips('请求终止,流程错误!')
      }
    },
    // drawer 底部按钮
    async drawerOperationsBnt(btn, type) {
      const _that = this
      let setObjItem = {}
      switch (type) {
        case 'show_information':
          setObjItem = {
            qualified_status: _that.qualified_status,
            audit_comment: _that.qualified_status === 2 ? _that.audit_comment : '',
            audit_detail: _that.audit_detail
          }
          break
      }
      switch (btn.interactive_mode) {
        case 'quiet_request':
          $butRequest(btn, setObjItem)
            .then((response) => {
              $tooltips(`${btn.name}成功!`, 'success')
              _that.$parent.$parent.show_information = false
              _that.$parent.$parent.upData()
            })
          console.log('安静的发起一个请求')
          break
        case 'confirm_request':
          console.log('请求时需要提示是否确认请求')
          break
        case 'open_request':
          console.log('弹窗后发起请求')
          break
        case 'open':
          console.log('只弹出不发起请求')
          break
        case 'close':
          _that.$parent.$parent[type] = false
          console.log('关闭弹窗不发起请求')
          break
      }
    },
    async itemOperationsBnt(btn, item, key) {
      if (this.$parent.$parent.currentItem.qualified_status === 1) {
        $dialogs('资料合格状态下无法修改', 'warning').then(() => {}).catch(() => {})
        return
      }
      // 将文件类似数组转字符串
      if (item.model['exf']) {
        if (item.model.exf.constructor === Object) { // 避免重复出现点
          let el_arry = []
          const el_keys = Object.keys(item.model.exf)
          el_keys?.forEach((ce) => {
            el_arry = [...el_arry, ...item.model.exf[ce]]
          })
          item.model.exf = el_arry.join(',').replace(/\s/g, '')
        }
      }
      this.$parent.$parent.group_key = key
      this.$parent.$parent.dialogFrom = item // 在提交的时候需要替换相同key 此处只是单项 整体数据在this.$parent.$parent.currentItem下的evaluation_course_information
      this.$parent.$parent.dialogFooterBtn = btn.children // 弹框底部按钮
      this.$parent.$parent.delRemoveFile = []
      this.$parent.$parent.show_editBox = true // 显示编辑框
    },
    // 设置提交时需要的合格/不合格数据
    async structureData(data) {
      const _that = this
      _that.audit_detail = []
      _that.audit_comment = ''
      _that.qualified_status = 1
      data.forEach((item) => {
        if (item.children) {
          item.children.forEach((el) => {
            if (el.audit_result.qualified_status === 2) {
              _that.qualified_status = 2
              _that.audit_comment += el.name + '：' + (el.audit_result.audit_comment ? el.audit_result.audit_comment : '') + '\r\n'
            }
            if (el.audit_result.qualified_status === 1) {
              el.audit_result.audit_comment = ''
            }
            _that.audit_detail.push(
              {
                'key': el.key,
                ...el.audit_result
              }
            )
          })
        } else {
          if (item.audit_result.qualified_status === 2) {
            _that.qualified_status = 2
            _that.audit_comment += item.name + '：' + (item.audit_result.audit_comment ? item.audit_result.audit_comment : '') + '\r\n'
          }
          if (item.audit_result.qualified_status === 1) {
            item.audit_result.audit_comment = ''
          }
          _that.audit_detail.push(
            {
              'key': item.key,
              ...item.audit_result
            }
          )
        }
      })
    },
    async onPreview(file) { // 文件预览及下载
      const _that = this
      if (file.target === 'blank') {
        window.open(file.path, '_blank')
      } else {
        _that.$parent.$parent.showPreview = true
        _that.$parent.$parent.previewFile = file
      }
      // const _that = this
      // MessageBox.confirm(``, `${file.name}`, {
      //   confirmButtonText: '预览',
      //   cancelButtonText: '下载',
      //   cancelButtonClass: 'confirmBg',
      //   showClose: true,
      //   distinguishCancelAndClose: true
      // }).then((confirm) => {
      //   if (file.target === 'blank') {
      //     window.open(file.path, '_blank')
      //   } else {
      //     _that.$parent.$parent.showPreview = true
      //     _that.$parent.$parent.previewFile = file
      //   }
      // }).catch((cancel) => {
      //   if (cancel === 'cancel') {
      //     _that.$XhrDownload(file.path, file.name, '', _that)
      //   }
      // })
    },
    showHide(type) {
      this.$parent.$parent.setShowHidden(type)
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '@/styles/sun-style.scss';
  .sun-el-upload ::v-deep .el-upload{
    display: none !important;
  }
  .box { padding: 0 14px;margin-top: 51px; }
  .itemBottom {
    display: flex; flex-direction: row; align-items:center;
    margin-bottom: 22px;
    padding: 0 60px;
    line-height: 60px;
    background: #F2F2F2F2;
   }
  .opinion_box{
    width:calc(100% - 150px);
  }
  .opinion_input {
   margin-left: 20px;
  }
  .cut-off {
    height: 14px;width: 100%;background:#E6E6E6;
  }
  .category_box {
    border-radius: 6px;background:#FFFFFF;margin-bottom: 14px;overflow: hidden;
  }
  .name_box{
    font-weight: bold;background:#5B9BD5;font-size: 20px;color: #FFFFFF;text-align: center;line-height: 40px;
  }
  .but-list{
    width:calc(100% - 28px) !important;
    margin: 0 14px;
    // background: #FFFFFF;display: inline-block;width:calc(100% - 28px);padding: 28px 14px;border-radius:6px;margin: 0 14px;
  }
</style>
